/*
 * @Description:已开通开通市民卡模块
 * @Author: tao.xie
 * @Date: 2019-03-20 09:55:39
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-03-25 15:00:27
 */

<template>

  <div style="height:100%">
    <!-- 头部包裹层 -->
    <div class="header-wrapper flex-h flex-vs flex-hsb">
      <div class="flex-v flex-hs">
        <span class="amount-title">账户余额（元）</span>
        <span class="amount-number">{{balance}}</span>
      </div>
      <button
        class="recharge-btn baseColorWithActive"
        @click="pushToRecharge"
      >充值</button>
    </div>

    <!-- 银行卡列表包裹层 -->
    <div class="card-list-wrapper">
      <bank-card-list />
    </div>

  </div>
</template>

<script>
import BankCardListModule from './BankCardListModule'
import { open } from '@/utils/JumpUtils.js'
import ConfirmBox from '@/components/confirm/ConfirmBox.js'
import * as status from '../constants/CardState'
export default {
  components: {
    'bank-card-list': BankCardListModule
  },
  props: {
    state: {
      type: Number,
      default: 0,
      require: true
    },
    balance: {
      type: String,
      default: '0.00',
      require: true
    }
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    pushToRecharge: function () {
      if (this.state !== status.CARD_STATE_OPEND) {
        let msg = this.state === status.CARD_STATE_FROZEN ? '电子市民卡已被冻结，暂不支持钱包余额充值等操作' : '电子市民卡已被注销，暂不支持钱包余额充值等操作'
        ConfirmBox.show({
          title: '抱歉',
          message: msg,
          confirmText: '确认',
          cancelText: null
        }).then(() => { })
      } else {
        open('buscard-app/recharge.html')
      }
    }

  }
}
</script>

<style>
/* 头部包裹层 */
.header-wrapper {
  height: 260px;
  width: 750px;
  background: linear-gradient(
    111deg,
    rgba(25, 126, 253, 1) 0%,
    rgba(34, 164, 254, 1) 100%,
    rgba(40, 172, 255, 1) 100%
  );
}
/*头部包裹层下子元素*/
.header-wrapper > * {
  margin: 0px 30px;
}
/*金额的标题*/
.amount-title {
  margin-top: 44px;
  color: #fff;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
  opacity: 0.6;
}
/*余额*/
.amount-number {
  margin-top: 6px;
  color: #fff;
  font-size: 50px; /*no*/
  line-height: 70px; /*no*/
}
/*充值按钮*/
.recharge-btn {
  margin-top: 130px;
  width: 140px;
  height: 60px;
  border: none;
  background: #fff;
  border-radius: 9px;
  font-size: 17px; /*no*/
}
/* 银行卡列表包裹层 */
.card-list-wrapper {
  height: calc(100% - 260px);
  overflow: scroll;
}
.card-list-wrapper::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
